<template>
  <div class="relative w-full h-full flex_fdc pb40">
    <PageHeader :title="$t('order_lists.商品订单管理')" />
    <SearchCom
      :searchList="searchList"
      @search="handleSearch"
      @reset="handleReset"
    />
    <!-- 订单状态：-1已取消，1待付款 3待发货，4待收货，5已完成 -->
    <el-radio-group v-model="type" class="mt12">
      <el-radio-button :label="$t('order_lists.全部订单')" value="0" />
      <el-radio-button :label="$t('order_lists.已完成订单')" value="5" />
      <el-radio-button :label="$t('order_lists.待付款订单')" value="1" />
      <el-radio-button :label="$t('order_lists.待发货订单')" value="3" />
      <el-radio-button :label="$t('order_lists.待收货订单')" value="4" />
      <el-radio-button :label="$t('order_lists.已取消订单')" value="-1" />
      <el-radio-button :label="$t('order_lists.已关闭订单')" value="-2" />
    </el-radio-group>
    <div style="height: calc(100% - 160px)" v-loading="loading">
      <Table :goodList="tableData" :type="type"/>
    </div>
    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, watchEffect } from "vue";
import { useRoute } from "vue-router";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import { getLangs } from "@/i18n/tools";
import Table from "./components/Table.vue";
import SearchCom from "@/components/SearchCom.vue";
import moment from "moment";

const route = useRoute()
const { t, locale } = useI18n();
const type = ref(route.query?.type || "0");
const filters = ref({});
const searchList = ref([]);

watchEffect(()=> {
  console.log(locale.value);
  searchList.value = [
    {
      label: t('order_lists.订单编号'),
      key: "saleNo",
      type: "input",
    },
    {
      label: t('order_lists.会员名称'),
      key: "vipNickName",
      type: "input",
    },
    {
      label: t('order_lists.下单时间'),
      key: "date",
      type: "daterange",
    },
  ]
})
const editDiaData = ref({});
const currentPage = ref(1);
const pageSize = ref(10);
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);
const handleSizeChange = (size) => {
  pageSize.value = size;
  getDataList();
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
  getDataList();
};
const getDataList = () => {
  loading.value = true;
  const { saleNo, vipNickName, date } = filters.value;
  Api.getOrderList({
    page: currentPage.value - 1,
    size: pageSize.value,
    status: type.value === "0" ? "" : type.value,
    saleNo,
    vipNickName,
    createdTimeStart: date?.[0] ? moment(date[0]).format("YYYY-MM-DD 00:00:00") : undefined,
    createdTimeEnd: date?.[1] ? moment(date[1]).format("YYYY-MM-DD 23:59:59") : undefined,
    tranType: 1
  }).then((res) => {
    tableData.value = res.data.content || [];
    tableData.value = (res.data.content || []).map((el, index) => {
      el.index = index
      el.saleSkus?.forEach((el2, i)=>{
        const mergeKey = [
          "vipNickName",
          "vipPhone",
          "vipAddressName",
          "vipAddressPhone",
          "vipAddressAddress",
          "vipAddressDetail",
          "payDiscountCoupon",
          "payDiscountPoint",
          "sendNo",
          "sendCode",
          "sendName",
          "index"
        ]
        getLangs().forEach((el3) => {
          mergeKey.push(`vipAddressProvince${el3}`);
          mergeKey.push(`vipAddressCity${el3}`);
          mergeKey.push(`vipAddressArea${el3}`);
        });
        mergeKey.forEach(key=>{
          el2[key] = el[key]
        })
        el2['salePayReal'] = el['payReal']

        el2.saleSkusIndex = i
        el2.saleSkusLength = el.saleSkus.length
      })
      return el
    });;
    total.value = Number(res.data.totalElements || 0);
    loading.value = false;
  });
};

const handleSearch = (params) => {
  currentPage.value = 1;
  filters.value = params;
  getDataList();
};

const handleReset = () => {
  filters.value = {};
  currentPage.value = 1;
  getDataList();
};

onMounted(() => {
  getDataList();
});

watch(
  () => type.value,
  () => {
    currentPage.value = 1;
    getDataList();
  }
);
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}
.order_list {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    border-radius: 3px;
    background: #f5f5f5;
    li {
      flex-shrink: 0;
      height: 40px;
      background: #f5f5f5;
      color: #333;
      font-size: 14px;
      line-height: 30px;
    }
    .width_32 {
      width: 32%;
      padding: 5px;
    }
    .width_8_5 {
      width: 8.2%;
      padding: 5px;
    }
    .center {
      text-align: center;
    }
    .pl_100 {
      padding-left: 100px;
    }
  }

  .order_content {
    flex: 1;
    width: 100%;
    overflow: auto;
    .order_content_height {
      max-height: 100%;
      overflow: auto;
      .item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        margin-top: 10px;
        border-width: 0 1px 1px;
        border-style: solid;
        border-color: #ddd;
        &:first-child {
          margin-top: 0;
        }

        .order_info {
          width: 100%;
          height: 35px;
          padding: 0 13px;
          background: #fff1e8;

          .create_time {
            color: #999;
            font-size: 12px;
          }

          .order_sn {
            color: #999;
            font-size: 12px;
          }
        }

        .width_57_5 {
          width: 57.5%;
          padding: 5px;
        }

        .goods {
          .goods_item {
            .goods_img_wrap {
              flex-shrink: 0;
              width: 82px;
              height: 82px;
              margin: 15px 10px 15px 15px;
              border: 1px solid rgba(0, 0, 0, 0.05);
              background: #fff;
              img {
                max-width: 100%;
                max-height: 100%;
              }
            }
            .goods_info {
              position: relative;
              .goods_name {
                display: -webkit-box;
                height: 40px;
                overflow: hidden;
                color: #333;
                font-size: 14px;
                line-height: 20px;
                text-overflow: ellipsis;
                word-break: break-word;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                flex-shrink: 0;
              }
              .goods_spec {
                margin-top: 12px;
                font-size: 12px;
                flex-wrap: wrap;
                span {
                  white-space: nowrap;
                  padding: 2px 5px;
                  background: #f5f5f5;
                  border-radius: 3px;
                }
              }
            }
            .goods_price,
            .buy_num {
              color: #333;
              font-size: 12px;
            }
          }
        }

        .member_info {
          .mem_name {
            padding: 0 5px;
            color: #333;
            font-size: 12px;
            word-break: break-word;
          }
        }

        .order_state {
          color: #666;
          font-size: 12px;
        }

        .operate {
          .operate_btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 85px;
            height: 26px;
            margin-top: 8px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 3px;
            color: #666;
            font-size: 12px;
            cursor: pointer;
            &:first-child {
              margin-top: 0;
            }
          }
        }

        .pay_amount {
          color: #ff1818;
          font-size: 12px;
          font-weight: 700;
        }
      }

      .flex_column_start_start {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
      }
    }
  }
  .width_8_5 {
    width: 8.2%;
    padding: 5px;
  }

  .center {
    text-align: center;
  }
}
</style>
